import React, { useEffect } from "react";
import { useSearchParams } from 'react-router-dom';

const Edit = () => {
    const [form] = React.UI.Form.useForm();
    let [searchParams] = useSearchParams();
    const business = React.Cookies.load('business')

    useEffect(() => {
        const GetGuessInfo = async () => {
            const params = {
                busid: business.id,
                gid: searchParams.get('gid')
            }

            const result = await React.Http.post('/guest/info', params);

            if (result.code === 1) {
                const guestinfo = result.data;
                form.setFieldsValue({
                    nickname: guestinfo.nickname,
                    mobile: guestinfo.mobile,
                    gender: guestinfo.gender.toString()
                });
            }
        }
        GetGuessInfo();
    }, [form, business.id, searchParams]);

    const EditGuestFinish = async (values: any) => {
        const params = {
            busid: business.id,
            gid: searchParams.get('gid'),
            nickname: values.nickname,
            mobile: values.mobile,
            gender: values.gender
        }
        const result = await React.Http.post('/guest/edit', params);
        if (result.code === 1) {

            React.success('修改成功');
            React.navigate('/guest');
        } else {
            React.fail(result.msg);
        }
    };
    return (
        <>
            <React.UI.Form
                form={form}
                layout="horizontal"
                onFinish={EditGuestFinish}
                // initialValues={guestinfo}
                footer={
                    <React.UI.Button block type='submit' color='primary' size='large'>
                        提交修改
                    </React.UI.Button>
                }
            >
                <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
                    <React.UI.Input placeholder="请输入昵称" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name='mobile' label='手机号' rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
                    <React.UI.Input placeholder='请输入手机号' />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
                    <React.UI.Radio.Group>
                        <React.UI.Space direction='horizontal'>
                            <React.UI.Radio value='0'>女</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>

            </React.UI.Form>
        </>
    )
}

export default Edit;